<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    省份：
    <select name="" id=""></select>
    城市：
    <select name="" id=""></select>
    区/县：
    <select name="" id=""></select>

    <script src="area.js"></script>
    <script>
        // console.log(place.data);
        // 省
        var sel = document.querySelectorAll("select");
        var str = '';
        

        place.data.forEach(function (item) {
           // console.log(item.provname);
            str += `<option value = "">${item.provname}</option>`
        });
        sel[0].innerHTML = str;

        sel[0].onchange = run1;
        sel[1].onchange = run2;

        run1();
        // 封装一个函数 run1
        function run1() {
            //console.log(place.data[0].city);
            var str = "";
            // 默认获取第一个对象下的city数组
            // 事实是 获取第一个下拉框选中项的的索引值
            // 根据索引值获取对应的数组
            var i = sel[0].selectedIndex; // 获取下拉框中的索引值
            var arr = place.data[i].city;
            arr.forEach(function (item) {
                str += `<option value = "">${item.cityname}</option>`
            });
            sel[1].innerHTML = str;
            run2();
        }




        function run2() {
            var str = "";
            var i = sel[0].selectedIndex;
            var j = sel[1].selectedIndex;
            var arr = place.data[i].city[j].dist;
            arr.forEach(function (item) {
                str += `<option value = "">${item}</option>`;
            });
            sel[2].innerHTML = str;
        }



     /*    // 市区
        var str = '';
        var arr = place.data[0].city;
        arr.forEach(function (item) {

            str += `<option value = "">${item.cityname}</option>`
        });
        sel[1].innerHTML = str;


        // 县
        var str = '';
        var arr = place.data[0].city[0].dist;
        arr.forEach(function (item) {

            str += `<option value = "">${item}</option>`
        });
        sel[2].innerHTML = str; */


    </script>
</body>

</html>